<template>
  <div>
    <headerXX :name="title"></headerXX>
    <div class="pull-refresh">
      <div class="ulbox">
        <div class="LBul">
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div style="font-size: 15px; font-weight: 700">基本信息</div>
            <van-image
              v-if="DDobj.orderStatus == 0"
              radius="4"
              class="img"
              :src="require('../imgs/SY.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == -1"
              radius="4"
              class="img"
              :src="require('../imgs/QX.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == 2"
              radius="4"
              class="img"
              :src="require('../imgs/SH.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == 1"
              radius="4"
              class="img"
              :src="require('../imgs/WC.png')"
              width="68px"
              height="20px"
              mode="widthFix"
            ></van-image>
            <van-image
              v-if="DDobj.orderStatus == 3"
              radius="4"
              class="img"
              :src="require('../imgs/PJ.png')"
              width="67px"
              height="21px"
              mode="widthFix"
            ></van-image>
            <van-tag
              class="img BHtag"
              v-if="DDobj.orderStatus == 4"
              type="primary"
              color="#ffe1e1"
              text-color="#ad0000"
            >
              <p class="yuan"></p>
              已驳回
            </van-tag>
          </div>

          <div class="LBli" style="display: flex; align-items: center">
            <div class="">
              <van-icon name="location" size="30" />
            </div>
            <div style="font-size: 13px; margin-left: 5px">
              {{ DDobj.orderLocation }}
            </div>
          </div>
          <van-divider></van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="font-size: 13px">预约人</div>
            <div style="font-size: 13px">
              {{ DDobj.userName }}
            </div>
          </div>
          <van-divider></van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="font-size: 13px">预约项目</div>
            <div style="font-size: 13px; display: flex; align-items: center">
              <div class="">
                {{ DDobj.orderType }}
              </div>
            </div>
          </div>
          <van-divider></van-divider>
          <div
            v-show="
              DDobj.orderType == '上门保洁' ||
              DDobj.orderType == '洗车服务' ||
              DDobj.orderType == '就医服务'
            "
          >
            <div
              class="LBli"
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
              @click="show = true"
            >
              <div style="font-size: 13px">通知二维码</div>
              <div class="WZ_size_14">
                <van-image
                  class="img"
                  radius="4"
                  width="80"
                  height="80"
                  :src="qrCodeUrl"
                  mode=""
                >
                 <template v-slot:loading>
                      <van-loading type="spinner" size="20" />
                    </template>
                </van-image>
              </div>
            </div>
            <van-divider></van-divider>
          </div>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="font-size: 13px">下单时间</div>
            <div style="font-size: 13px">
              {{ DDobj.creationTime }}
            </div>
          </div>
          <van-divider v-if="DDobj.orderTime != ''"></van-divider>
          <div
            v-if="DDobj.orderTime != ''"
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="font-size: 13px">预约时间</div>
            <div style="font-size: 13px">
              {{ DDobj.orderTime }}
            </div>
          </div>
          <van-divider></van-divider>
          <div
            class="LBli"
            style="
              display: flex;
              align-items: center;
              justify-content: space-between;
            "
          >
            <div style="font-size: 13px">预约单号</div>
            <div style="font-size: 13px">
              {{ DDobj.orderNumber }}
            </div>
          </div>
          <van-divider></van-divider>
          <div
            style="font-size: 15px; font-weight: 700; margin-bottom: 10px"
            v-if="DDobj.detailList"
          >
            订单信息
          </div>
          <div class="" v-if="DDobj.detailList">
            <div v-for="(item, index) in DDobj.detailList" :key="index">
              <div class="XXli">
                <div class="XXli_left">
                  <van-image
                    mode="widthFix"
                    :showLoading="true"
                    :src="item.picUrl"
                    width="100px"
                    height="100px"
                  ></van-image>
                </div>
                <div class="XXli_right">
                  <div style="padding-left: 10px; width: 60%">
                    {{ item.name }}
                  </div>
                  <div class="">预约数：{{ item.qty }}</div>
                </div>
              </div>
              <van-divider></van-divider>
            </div>
          </div>
          <div v-if="DDobj.orderEvaluateAdmin">
            <div class="title">
              <div style="margin-bottom: 10px; font-weight: bold">商家反馈</div>
              <text style="font-size: 14px">{{
                DDobj.orderEvaluateAdmin.content
              }}</text>
            </div>
            <van-divider></van-divider>
            <div style="margin: 5px 0 10px 0; font-weight: bold">图片信息</div>
            <div v-if="backImgList.length > 0" class="imgs">
              <div
                style="margin: 10px"
                class="photo-item"
                v-for="(item, index) in backImgList"
                :key="index"
              >
                <van-image
                  :src="item"
                  mode="widthFix"
                  width="100px"
                  height="100px"
                ></van-image>
              </div>
            </div>
            <div class="" v-else>暂无图片</div>
          </div>
        </div>
      </div>
      <div
        class="ulboxNext"
        v-if="
          (DDobj.orderStatus == '1' && DDobj.orderEvaluateUser) ||
          (DDobj.orderStatus == '3' && DDobj.orderEvaluateUser)
        "
      >
        <div style="margin: 10px auto; font-weight: bold">
          <div class="WZ_size_14">服务评分</div>
          <div style="display: flex; justify-content: center">
            <van-rate
              v-model="DDobj.orderEvaluateUser.score"
              :size="25"
              readonly
              color="#ffd21e"
              void-icon="star"
              void-color="#eee"
            />
            <!-- <van-rate
            activeColor="#39BCB4"
            size="35"
            :count="5"
            disabled
            v-model="DDobj.orderEvaluateUser.score"
          ></van-rate> -->
          </div>
        </div>
        <div class="title">
          <div
            style="margin-bottom: 10px; font-weight: bold"
            class="WZ_size_14"
          >
            评价内容
          </div>
          <van-field
            type="textarea"
            v-model="DDobj.orderEvaluateUser.content"
            height="50"
            disabled
            placeholder="暂无评价内容"
          ></van-field>
        </div>
        <!-- <div class="photo">
        <div style="margin: 5px 0 10px 0; font-weight: bold">评价图片</div>
        <div>
          <div v-if="imgList.length > 0" class="imgs">
            <div
              style="margin: 10px"
              class="photo-item"
              v-for="(item, index) in imgList"
              :key="index"
            >
              <van-image
                :src="item"
                mode="widthFix"
                width="100px"
                height="100px"
              ></van-image>
            </div>
          </div>
          <div class="" v-else>暂无图片</div>
        </div>
      </div> -->
      </div>
      <div class="ulboxNext" v-if="DDobj.orderStatus == '4'">
        <div style="margin: 10px auto; font-weight: bold">
          <div class="title">
            <div
              style="margin-bottom: 10px; font-weight: bold"
              class="WZ_size_14"
            >
              驳回原因
            </div>
            <van-field
              type="textarea"
              v-model="DDobj.orderExtend1"
              height="50"
              disabled
              placeholder="暂无驳回原因"
            ></van-field>
          </div>
        </div>
      </div>
      <div>
        <div style="display: flex; padding: 10px; padding-top: 20px">
          <van-button
            @click="TY(DDobj, '取消订单')"
            v-if="DDobj.orderStatus == 0"
            style="
              border: none;
              color: rgb(56, 56, 56);
              height: 50px;
              width: 50%;
            "
            :hairline="false"
            color="rgb(229, 229, 229)"
            text="取消订单"
          ></van-button>
          <van-button
            @click="TY(DDobj, '完成订单')"
            v-if="DDobj.orderStatus == 0"
            style="border: none; margin: 0 5px; height: 50px; width: 50%"
            :hairline="false"
            type="primary"
            text="完成订单"
          ></van-button>
          <van-button
            @click="TY(DDobj, '驳回申请')"
            v-if="DDobj.orderStatus == 2"
            style="
              border: none;
              color: #fff;
              margin: 0 5px;
              height: 50px;
              width: 50%;
            "
            :hairline="false"
            type="warning"
            text="驳回申请"
          ></van-button>
          <van-button
            @click="TY(DDobj, '同意申请')"
            v-if="DDobj.orderStatus == 2"
            style="border: none; color: #fff; height: 50px; width: 50%"
            :hairline="false"
            color="rgb(54, 194, 168)"
            text="同意申请"
          ></van-button>
        </div>
      </div>
      <van-image-preview v-model:show="show" :images="images">
      </van-image-preview>
    </div>
    <van-popup v-model:show="BHshow" position="bottom" :style="{ height: '30%' }">
      <div class="BHxx"></div>
      <van-form @submit="onSubmit">
        <van-cell-group inset>
          <van-field
            v-model="BHobj.orderExtend1"
            rows="2"
            autosize
            label="驳回原因"
            type="textarea"
            maxlength="50"
            placeholder="请输入驳回原因"
            show-word-limit
            :rules="[{ required: true, message: '请输入驳回原因' }]"
          />
          <!-- <van-field
           maxlength="50"
            v-model="username"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
          /> -->
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block type="primary" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </van-popup>
  </div>
</template>

<script>
import moment from "moment";
import { getmoreRoute } from "../../common/moreRouteList";
import { Dialog, Notify } from "vant";
import QRCode from "qrcode";
import headerXX from "../../components/title.vue";
import {
  getOrderDetailList,
  updateServiceOrderAdmin,
  updateServiceOrderAdminNot,
} from "@/api/realAssets/icsharedstation/DD/index.js";
export default {
  components: { headerXX },
  data() {
    return {
      BHshow:false,
      title: "订单详情",
      id: "",
      ZT: "",
      BHobj: {
        orderStatus: "4",
        orderExtend1: "",
        id: "",
      },
      orderType: "",
      show: false,
      showTC: false,
      images: [],
      titleSH: "",
      contentNr: "",
      qrCodeUrl: "",
      DDdetail: null,
      imgList: [],
      backImgList: [],
      DDobj: {
        creationTime: "",
        creator: "",
        id: "",
        lastUpdateTime: "",
        mobile: "",
        orderLocation: "",
        orderNumber: "",
        orderStatus: "",
        orderTime: "",
        orderType: "",
        postId: "",
        siteId: "",
        userName: "",
      },
    };
  },
  created() {
    var arrayString = this.$route.query.YYXQxx;
    if (arrayString) {
      // 解码并转换回数组
      let XX = JSON.parse(decodeURIComponent(arrayString).replace(/%25/g, "%"));
      this.getDD(XX);
    }
  },
  mounted() {},
  methods: {
      //确认驳回
    onSubmit() {
      updateServiceOrderAdminNot(this.BHobj).then((res) => {
        this.BHshow = false;
        Notify({ type: "success", message: "驳回成功" });
        this.$router.go(-1);
      });
    },
    TY(val, name) {
      this.showTC = true;
      this.ZT = name;
      this.id = val.id;
      this.orderType = val.orderType;
      if (this.ZT == "同意申请") {
        Dialog.confirm({
          title: "确认审核",
          message: `正在同意审核，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            updateServiceOrderAdmin({
              serviceType: this.orderType,
              orderStatus: "-1",
              id: this.id,
            }).then((res) => {
              Notify({ type: "success", message: "订单取消成功" });
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          })
          .catch(() => {});
      }
      if (this.ZT == "完成订单") {
        Dialog.confirm({
          title: "完成订单",
          message: `正在完成订单，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            updateServiceOrderAdmin({
              serviceType: this.orderType,
              orderStatus: "1",
              id: this.id,
            }).then((res) => {
              Notify({ type: "success", message: "订单完成" });
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          })
          .catch(() => {
            // on cancel
          });
      }
      if (this.ZT == "取消订单") {
        Dialog.confirm({
          title: "取消订单",
          message: `正在取消订单，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            // on confirm
            updateServiceOrderAdmin({
              serviceType: this.orderType,
              orderStatus: "-1",
              id: this.id,
            }).then((res) => {
              Notify({ type: "success", message: "取消成功" });
              setTimeout(() => {
                this.$router.go(-1);
              }, 1000);
            });
          })
          .catch(() => {
            // on cancel
          });
      }
      if (this.ZT == "驳回申请") {
        Dialog.confirm({
          title: "驳回申请",
          message: `正在取消订单，订单号为【${val.orderNumber}】的订单`,
        })
          .then(() => {
            this.BHshow = true;
            this.BHobj.id = val.id;
            // // on confirm
            // updateServiceOrderAdmin({
            //   serviceType: this.orderType,
            //   orderStatus: "0",
            //   id: this.id,
            // }).then((res) => {
            //   Notify({ type: "success", message: "拒绝成功" });
            //   setTimeout(() => {
            //      this.$router.go(-1)
            //   }, 1000);
            // });
          })
          .catch(() => {
            // on cancel
          });
        // titleSH.value = "驳回申请";
        // contentNr.value = `正在拒绝申请，订单号为【${val.orderNumber}】的订单`;
      }
    },
    generateQRCode() {
      // "17542654241347606885313476068853"
      setTimeout(async () => {
        try {
          const lastSixDigits = this.DDobj.orderNumber.slice(-6); //取后六位
          let codeDetailMessage =
            lastSixDigits +
            this.DDobj.mobile02 +
            this.DDobj.detailList[0].mobile02 +
            this.DDobj.detailList[0].type +
            this.DDobj.orderTime02;
          this.qrCodeUrl = await QRCode.toDataURL(codeDetailMessage);
          this.images = [this.qrCodeUrl];
        } catch (err) {}
      }, 1000);
    },
    getDD(val) {
      let obj = {
        orderNumber: val.orderNumber,
        postId: val.postId,
        siteId: val.siteId,
      };
      getOrderDetailList(obj).then((res) => {
        if (res.resultMessage == "SUCCESS" && res.resultCode == 1) {
          this.DDobj = res.data;
          this.generateQRCode();
          if (this.DDobj.orderLocation == "") {
            this.DDobj.orderLocation =
              JSON.parse(getmoreRoute())[0].postName + "员工驿站";
          }
          if (this.DDobj.orderEvaluateAdmin) {
            if (this.DDobj.orderEvaluateAdmin.img != "") {
              this.backImgList = this.DDobj.orderEvaluateAdmin.img.split(",");
            }
          }
          if (this.DDobj.orderEvaluateUser) {
            this.imgList = this.DDobj.orderEvaluateUser.img.split(",");
          }
          if (this.DDobj.orderTime != "") {
            let orderTime = moment(this.DDobj.orderTime).format("YYYY-MM-DD");
            if (orderTime != "Invalid date") {
              this.DDobj.orderTime = orderTime;
            }
          }
        } else {
          // uni.showToast({
          // 	title: '网络错误',
          // 	icon: 'none'
          // })
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import "../../static/css/index.less";
@import "../../static/css/GYcSS.less";
.imgs {
  display: flex;
}
.BHtag {
  // padding: 3px;
  .yuan {
    width: 5px;
    height: 5px;
    background: #ad0000;
    border-radius: 50%;
    margin: 0px 3px;
  }
}
.ulbox {
  // height: calc(
  //   var(--real-vh, 1vh) * 100 - 130px - env(safe-area-inset-bottom) -
  //     env(safe-area-inset-top)
  // );
  padding: 10px;
  box-sizing: border-box;

  .LBul {
    background: #fff;
    //margin-top: 10px;
    border-radius: 10px;
    padding: 10px;
  }
}

.topXX {
  background: #fff;
  border-radius: 10px;
  padding: 10px;
  margin: 0 auto;

  .top {
    font-size: 14px;
    color: rgb(255, 141, 26);
  }
}

.DI {
  position: fixed;
  z-index: 999;
  width: 90%;
  left: 50%;
  bottom: 5px;
  transform: translate(-50%, -5px);
  font-size: 12px;
  text-align: center;
  font-weight: 600;
  background: rgba(245, 245, 245, 1);

  .DI_bottom {
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: rgb(2, 117, 113);
    color: #fff;
    border-radius: 5px;
  }
}

.XXli {
  display: flex;
  align-items: center;

  .XXli_right {
    width: 100%;
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
}

.ulboxNext {
  background: rgba(245, 245, 245, 1);
  padding: 10px;
  box-sizing: border-box;
  background-color: #fff;
  margin: 10px;
  border-radius: 10px;
}
</style>